리액트 로딩상태 관리

❓질문

useEffect를 이용하여 로딩 상태 관리하는 방법과 Suspense를 활용하는 방법에 대한 차이점을 설명해주세요.

💡 조사하기전 내가 알고 있던 내용

먼저 useEffect를 활용하여 로딩 상태를 관리하는 방법은 아마 누르면 로딩 컴포넌트를 보여주고 비동기 처리된 데이터의 결과값을 상태로 만들고 useEffect에서 상태값을 true/false로 관리하면서 보여주고 사라지고를 관리할것이고
그리고 Suspense는 결과값이 오기전까지 대체로 돌아가는 로딩컴포넌트를 보여줌으로써 (fallback 속성) 동작할것이다.

🏫 정리한 내용

먼저 Suspense와 기존에 쓰던 useEffact()는 로딩 상태를 관리하는 방식에서 근본적인 차이가 있습니다.

기존에 방식에서는 데이터를 불러올 때 useEffact()훅을 사용할려면 따로 상태를 선언해야됩니다. 이 방식은 여러 개의 비동기 데이터를 다룰 때에는 조건부 렌더링 로직이 복잡해질 수 있습니다.

반면 Suspense는 로딩 중인 컴포넌트를 직접 렌더링하지 않고, Suspense컴포넌트의 fallback속성으로 로딩 UI를 정의하게끔 합니다. 데이터를 기다리는 동안에는 fallback으로 정의된 UI만 보여주고, 데이터가 모두 준비되면 Suspense에 감싸진 컴포넌트를 자연스럽게 표시합니다. 이렇게 로딩 상태를 선언적으로 관리할 수 있기 때문에, 전체적인 코드가 단순해지고 유지보수도 쉬워집니다.